<!--公共头部-->
{template 'aitimt/common/header'}
		<style>
			* {
			    touch-action: none;
			}
			body{
				background-color: #FFFFFF;
			}
			.mui-control-content {
				background-color: white;
			}
			.mui-control-content .mui-loading {
				margin-top: 3.125rem;
			}
			.mui-table-view .mui-media-object{
				height: 6.25rem;
				max-width: 8.125rem;
			}
			.mui-bar-nav{
				position: absolute;
					background-color: #e94709;
					height: 30%;
				    border-radius: 0 0 100% 100% /100%;

			}
			.top-content{
				position: absolute;
				width: 100%;
				font-size:0.625rem;
				}
				.top-content img{
					width: 100%;
					}
				.top-logo {
				position: absolute;
				    width: 10%;
					top: 0.625rem;
						}
				.top-message{
					position: absolute;
					    width: 10%;
					    right: 5%;
						top: 0.3125rem;
				}
			.mui-input-row{
				overflow: unset;
				left: 11%;
			}

			 .mui-search input[type=search] {
				      background-color: #f0774a;
				      width: 70%;
				      border-radius: 3.125rem;
				      height: 2.5625rem;
					  color: #ffffff;
			}
			.mui-active::before{
				color: #FFFFFF;
			}
			.mui-search .mui-placeholder{
				color: #595757;
				line-height: 2.5rem;
				font-size: 0.5375rem;
				width: 45%;
				color: #FFFFFF;
				}
			.search-icon{
					background-color: #fad6c8;
					    position: absolute;
					    top: 0.375rem;
					    right: 30%;
					    width: 15%;
					    text-align: center;
					    border: 0;
					    height: 2.5625rem;
					    color: #e94709;
					    border-radius: 1.25rem;
					    overflow: hidden;
			}
			.mui-slider .mui-slider-group .slider-item img{
				    width: 90%;
				    margin-top:4% ;
					margin-left: 5%;
				    border-radius: 1.25rem;
			}
			.mui-slider{
				z-index: 15;
				margin-top:3rem ;
				overflow: unset;
			}
			.mui-slider-indicator{
			bottom: -1.25rem;
			}
			.mui-slider-indicator .mui-active.mui-indicator{
				background: #ea4609;
			}
			.mui-slider-indicator .mui-indicator{
				background: #ffcebd;
			}
			.mui-bar-tab .mui-tab-item.mui-active{
				color: #ea4609;
			}
			.mui-indicator .mui-active{
				background-color:#000000;
			}


				.mui-grid-view.mui-grid-9{
					border: none;
					background-color: #FFFFFF;

				}
				.mui-grid-view.mui-grid-9 .mui-table-view-cell{
					border: none;
				}
				.mui-grid-view.mui-grid-9 .mui-table-view-cell{
					padding: 0;
					margin-top:2%;
				}
				.know-item img{
					width: 70%;
				}
			.mui-search .mui-placeholder .mui-icon{
				color: #FFFFFF;
			    line-height: 1.875rem;
			}
			.mui-table-view .mui-media, .mui-table-view .mui-media-body{
				line-height: 2rem;
			}
			.notify{
				margin: 0 1rem;
				width: 90%;
				height: 3rem;
				border: #dbdbdb solid 1px;
				border-radius: 1.25rem;
			}
		.notify img{
				    width: 15%;
				    margin: 0px 5px;
				    padding: 5px;
				    float: left;
		}
		.notify a{
			font-size: 0.625rem;
			    color: #585657;
			    width: 70%;
		}

			 .hot-content{
				    border: none;
				    width: 95%;
				   margin-left: 4%;
				   margin-top: 5%;
				 display: inline-block;
		  }

		   .hot-content .hot-title span{
			   border-left: 0.3125rem #e94709 solid;
		   }
		   .hot-content .hot-list .hot-item{
		   			background-color: #fbf7f6;
		   			    width: 46.5%;
		   			    float: left;
		   			    margin-top: 2%;
		   			    margin-right: 3%;
		   }
		   .hot-content .hot-list .hot-item img{
			   margin-top:0.125rem ;
				width: 100%;
		   }
		   .hot-content .hot-list .hot-item div{
			   font-size: 0.9375rem;
			   color: #585657;
			   line-height: 1.5625rem;
			    text-align: center;
		   }
		  .hot-content .hot-title .hot-more{
			  float: right;
			  color: #999999;
			  margin-right: 5%;
		  }
			.now-content{
					border: none;
					width: 95%;
					margin-left: 4%;
					margin-top:5% ;
				display: inline-block;

			}
			 .now-content .now-title span{
						   border-left: 0.3125rem #e94709 solid;
			 }
			.now-content .now-title .now-more{
						  float: right;
						  margin-right: 5%;
						  color: #999999;
			}
			.now-content .now-slider{
						 padding: 0;
						 margin: 0;
						 margin-left: -5%;
						 z-index: 0;
						 width: 105%;

			}
			.mui-segmented-control.mui-segmented-control-inverted .mui-control-item{
				margin: 0;
			}
			.now-item{
				     background-color: #fbf7f6;
					 width: 45%;
					 float: left;
					 margin-top: 3%;
					 margin-left: 4%;
			}
			.mui-table-view-cell{
				padding: 0;
				overflow: unset;
			}
			.now-item img{
						 padding: 0;
						     margin: 0;
						     width: 100%;
						     border-radius: 0;
			}
			.now-item div{
						   font-size: 0.9375rem;
						   color: #585657;
						   line-height: 1.5625rem;
						    text-align: center;
			}

			.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body{
				margin: 0;
				color: #666666;
			}
			.bottom-remind {
				width: 100%;
				text-align: center;
				padding-top: 30%;
				font-size: 25px;
				color: #969696;
			}
			.mui-scroll{
				margin-bottom: 15%;
			}
		</style>
		<header class="mui-bar mui-bar-nav">
				<div class="top-content">
					<a class="top-logo"><img src="{aide_URL}template/mobile/aitimt/images/logo.png" ></a>
					<div class="mui-input-row mui-search">
							<input type="search" class="mui-input-clear" placeholder="输入赛事/类型/城市/状态">
						<button  onclick="location.href='no.html';"  type="button" class="search-icon">搜索</button>
					</div>
					<a class="top-message" href="myremind.html"><img src="{aide_URL}template/mobile/aitimt/images/mssage1.png" ></a>

			</div>

		</header>
		<!-- 首页头部end -->
		<div class="mui-slider" id="top-slider">
		  <div class="mui-slider-group mui-slider-loop">
		    <!--支持循环，需要重复图片节点-->
			  <!--轮播图 --start-->
			  {loop array_reverse($advlist) $adv}
			  <div class="slider-item mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="{php echo tomedia($adv['thumb'])}" /></a></div>
			  {php break;}
			  {/loop}
			  {loop $advlist $adv}
			  <div class="slider-item mui-slider-item"><a href="#"><img src="{php echo tomedia($adv['thumb'])}" /></a></div>
			  {/loop}
			  <!--支持循环，需要重复图片节点-->
			  {loop $advlist $adv}
			  <div class="slider-item mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="{php echo tomedia($adv['thumb'])}" /></a></div>
			  {php break;}
			  {/loop}
		  </div>
		  <div class="mui-slider-indicator">
			  {loop $advlist $adv}
			  <div class="mui-indicator"></div>
			  {/loop}

		  </div>
		</div>
		<ul class="mui-table-view mui-grid-view mui-grid-9">
			{loop $cateData[0] $v}
			{if $v['visible_level']}
			<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
				<a href="{php echo app_url('activity/activity/display',array('pid'=>$v['parentid']?$v['parentid']:$v['id'],cid=>$v['parentid']?$v['id']:0))}">
					<span class="know-item"><img src="{php echo tomedia($v['thumb']);}" ></span>
					<div class="mui-media-body">{$v['name']}</div>
				</a>
			</li>
			{/if}
			{/loop}
			</ul>

		<div class="notify">
			<a><img  src="{aide_URL}template/mobile/aitimt/images/notify.jpg" ></a>
			<a href="no.html"> · 通知通知通知通知通知通知通知</a><br>
			<a href="no.html"> · 通知通知通知通知通知通知通知</a>
				</div>
				<div class="article">

				<div class="hot-content">
					<div class="hot-title">

						<span> <a style="margin: 10px; color: #000000;font-weight: 800;">热门推荐</a></span>
						<a href="event.html" class="hot-more">查看更多</a>
					</div>
					<div class="hot-list">
						{loop $recommendlist $recommend}
						<div class="hot-item">
							<a href="{php echo app_url('home/index/recommend').'&activityid='.$recommend['id']}">
								<img src="{php echo tomedia($recommend['thumb'])}" >
								<div>{$recommend['title']}</div>
								<div>{$recommend['starttime']}</div>
							</a>
						</div>
						{/loop}
			      </div>
				</div>
		<div class="now-content">
			<div class="now-title">
				<span> <a style="margin: 10px; color: #000000;font-weight: 800;">即将开始</a></span>
				<a href="event.html" class="now-more">查看更多
				</a>
			</div>
		<div id="slider" class="mui-slider now-slider">
			<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
				    <div class="mui-scroll">
						<a class="mui-control-item" href="#month01" >1月</a>
						<a class="mui-control-item" href="#month02" >2月</a>
						<a class="mui-control-item" href="#month03" >3月</a>
						<a class="mui-control-item" href="#month04" >4月</a>
						<a class="mui-control-item" href="#month05" >5月</a>
						<a class="mui-control-item" href="#month06" >6月</a>
						<a class="mui-control-item" href="#month07" >7月</a>
						<a class="mui-control-item" href="#month08" >8月</a>
						<a class="mui-control-item" href="#month09" >9月</a>
						<a class="mui-control-item" href="#month10" >10月</a>
						<a class="mui-control-item" href="#month11" >11月</a>
						<a class="mui-control-item" href="#month12" >12月</a>

				</div>
			</div>
				<div class="mui-slider-group">
					{loop $activityList $key=>$activity}
						{if $month==$key}
					<div id="{php echo month.$key}" class="mui-slider-item mui-control-content mui-active">
							<div class="mui-scroll">
								<ul class="mui-table-view">
									{if $activity==[]}
									<div class="bottom-remind">暂无活动</div>
									{/if}
									{loop $activity $item}
									<li class="mui-table-view-cell">
										<div  class="now-item">
											<a href="{php echo app_url('home/index/recommend').'&activityid='.$item['id']}">
												<img src="{php echo tomedia($item['thumb'])}" >
												<div>{$item['title']}</div>
												<div>{$item['starttime']}</div>
											</a>
										</div>
									</li>
									{/loop}
								</ul>
						</div>
					</div>
					{/if}
					<div id="{php echo month.$key}" class="mui-slider-item mui-control-content">
							<div class="mui-scroll">
								<ul class="mui-table-view">
									{if $activity==[]}
									 <div class="bottom-remind">已显示全部内容</div>
									{/if}
									{loop $activity $item}
									<li class="mui-table-view-cell">
										<div  class="now-item">
											<a href="{php echo app_url('home/index/recommend').'&activityid='.$item['id']}">
												<img src="{php echo tomedia($item['thumb'])}" >
												<div>{$item['title']}</div>
												<div>{$item['starttime']}</div>
											</a>
										</div>
									</li>
									{/loop}
								</ul>
							</div>
					</div>

					{/loop}

				</div>
			</div>
		</div>
	</div>
	<!-- 公共底部start -->
{template 'aitimt/common/nav'}
		<!-- 公共底部end -->

	<script>
		mui.init({
		});
		var gallery = mui('#top-slider');
		gallery.slider({
		  interval:5000//自动轮播周期，若为0则不自动播放，默认为0；
		});
		mui('.mui-bar').on('tap','a',function(){
			document.location.href=this.href;
		})

		mui('.hot-item').on('tap','a',function(){
			document.location.href=this.href;
		})
		mui('.now-item').on('tap','a',function(){
			document.location.href=this.href;
		})
		// 得到当前月份
		function getMonth(dateObj) {
			var month=dateObj.getMonth()
			switch(month) {
				case 0: return "01"; break;
				case 1: return "02"; break;
				case 2: return "03"; break;
				case 3: return "04"; break;
				case 4: return "05"; break;
				case 5: return "06"; break;
				case 6: return "07"; break;
				case 7: return "08"; break;
				case 8: return "09"; break;
				case 9: return "10"; break;
				case 10: return "11"; break;
				case 11: return "12"; break;
				default:
			}
		}
		var dataObj=new Date();
		var Tmonth=dataObj.getMonth();
		document.getElementById('sliderSegmentedControl').getElementsByTagName('div')[0].getElementsByTagName('a')[Tmonth].classList.add('mui-active');
		mui('.mui-bar').on('tap','a',function(){
			document.location.href=this.href;
		})
		mui.init({
			swipeBack: false,
		});
		(function($) {
			$('.mui-scroll-wrapper').scroll({
				indicators: true ,//是否显示滚动条
				 bounce: false ,//是否启用回弹

			});
			document.getElementById('slider').addEventListener('slide', function(e) {
			});
			var sliderSegmentedControl = document.getElementById('sliderSegmentedControl');
			$('.mui-input-group').on('change', 'input', function() {
				if (this.checked) {
					sliderSegmentedControl.className = 'mui-slider-indicator mui-segmented-control mui-segmented-control-inverted mui-segmented-control-' + this.value;
					//force repaint
					sliderProgressBar.setAttribute('style', sliderProgressBar.getAttribute('style'));
				}
			});
		})(mui);
		</script>
	</body>

</html>
